import React, {JSX, useCallback} from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {SearchIcon} from '../../../kit/icon';
import {debounce} from '../../../utils/utils';
import {normalize} from '../../../utils/adapter';

type Props = {
  onSearch: (value: string) => void;
  placeholder?: string;
};

function SearchInput({
  onSearch,
  placeholder = '点击搜索更多短剧',
}: Props): JSX.Element {
  const handleInputChange = useCallback(
    debounce((value: string) => {
      onSearch(value);
    }, 1000),
    [],
  );

  return (
    <View style={styles.search_input_container}>
      <SearchIcon size="24" />
      <TextInput
        style={styles.input_container}
        placeholder={placeholder}
        placeholderTextColor={'#999999'}
        onChangeText={handleInputChange}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  search_input_container: {
    flexDirection: 'row',
    backgroundColor: '#F6F6F6',
    height: normalize(34),
    marginHorizontal: normalize(10),
    borderRadius: normalize(16),
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  input_container: {
    flex: 1,
    marginLeft: normalize(10),
    fontSize: normalize(14),
    paddingVertical: 0,
    includeFontPadding: false,
    textAlignVertical: 'center',
    color: '#000',
  },
});

export default SearchInput;
